<template>
  <div class="hello">
    <SouSuo />
    <div class="maxbox">
      <div class="box">
        <div class="yings" align="center">
          <div>
            <img src="http://127.0.0.1/homework/my-ying/img/icon/fenlei.png" alt="图片加载失败" />
            <p>分类</p>
          </div>
          <div>
            <img src="http://127.0.0.1/homework/my-ying/img/icon/paihangbang-.png" alt="图片加载失败" />
            <p>排行榜</p>
          </div>
          <div>
            <img src="http://127.0.0.1/homework/my-ying/img/icon/huabanfuben.png" alt="图片加载失败" />
            <p>腾讯王卡</p>
          </div>
          <div>
            <img src="http://127.0.0.1/homework/my-ying/img/icon/youhui.png" alt="图片加载失败" />
            <p>优惠</p>
          </div>
          <div>
            <img src="http://127.0.0.1/homework/my-ying/img/icon/danji.png" alt="图片加载失败" />
            <p>单机</p>
          </div>
        </div>
        <div class="yingr" align="center">
          <img src="http://127.0.0.1/homework/my-ying/img/icon/gengduo.png" alt="图片加载失败" />
          <p>全部</p>
        </div>
      </div>
      <div class="luns">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="item of luns_list" :key="item">
            <img :src="item" alt />
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="vbe1_1">
        <div class="heatop">
          <p>热门应用</p>
          <span class="mui-icon mui-icon-forward"></span>
        </div>
        <div class="chang">
          <v-touch class="xuan_s" tag="div" v-for="(item,id) of chan_list" :key="id" align="center">
            <router-link tag="div" :to="'/home/'+item.id">
              <img class="imgs" :src="item.src" alt />
              <p class="name">{{item.textp}}</p>
              <p class="namo">下载</p>
            </router-link>
          </v-touch>
        </div>
      </div>
      <div class="vbe2_1">
        <div class="heatop">
          <p>碎片时间,利用起来</p>
          <span class="mui-icon mui-icon-forward"></span>
        </div>
        <div class="xialun">
          <div class="danlu" v-for="(item,id) of cun_list" :key="id">
            <img :src="item.src" alt class="imgs" />
            <div class="itma">
              <p class="nama">{{item.textp}}</p>
              <p class="name">{{item.textc}}</p>
            </div>

            <p class="namo">下载</p>
          </div>
        </div>
      </div>
      <div class="vbe3_1">
        <div class="heatop">
          <p>暖暖新作</p>
          <span class="mui-icon mui-icon-forward"></span>
        </div>
        <video id="myVideo" class="video-js" loop="loop">
          <source src="http://127.0.0.1/homework/my-ying/mp4/j08598s2ha4.m701.mp4" />
        </video>
        <div class="heabot">
          <div class="namel">
            <p class="namet">为闪耀的自我而生</p>
            <p class="nameb">抽取拍立得</p>
            <div class="headl">
              <img
                class="headimg"
                src="https://pp.myapp.com/ma_icon/0/icon_52699870_1564974001/96"
                alt="加载失败"
              />
              <p class="namez">闪耀暖暖</p>
            </div>
          </div>
          <p class="namo">下载</p>
        </div>
      </div>
      <div class="vbe2_1">
        <div class="heatop">
          <p>碎片时间,利用起来</p>
          <span class="mui-icon mui-icon-forward"></span>
        </div>
        <div class="xialun">
          <div class="danlu" v-for="(item,id) of cuns_list" :key="id">
            <router-link tag="div" :to="'/home2/'+item.id">
              <img :src="item.src" alt class="imgs" />
              <div class="itma">
                <p class="nama">{{item.textp}}</p>
                <p class="name">{{item.textc}}</p>
              </div>
              <p class="namo">下载</p>
            </router-link>
          </div>
        </div>

        <div class="xialun">
          <div class="danlu" v-for="(item,id) of cuns_list" :key="id">
            <img :src="item.src" alt class="imgs" />
            <div class="itma">
              <p class="nama">{{item.textp}}</p>
              <p class="name">{{item.textc}}</p>
            </div>
            <p class="namo">下载</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SouSuo from "./container/sousuo.vue";
export default {
  components: {
    SouSuo
  },
  data() {
    return {
      luns_list: [],
      chan_list: [],
      cun_list: [],
      cuns_list: []
    };
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        // controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",

        //设置视频播放器的显示宽度（以像素为单位）
        width: "341px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "193px"
      });
    }
  },
  created() {
    this.axios
      .get(
        "https://www.easy-mock.com/mock/5d22b07122209809144c8ca2/example/luns"
      )
      .then(res => {
        this.luns_list = res.data.data.src;
      });
    this.axios
      .get(
        "https://www.easy-mock.com/mock/5d22b07122209809144c8ca2/example/id=1"
      )
      .then(res => {
        this.$store.commit("increment", res.data.data.register);
        this.chan_list = res.data.data.register;
      });

    this.axios
      .get(
        "https://www.easy-mock.com/mock/5d22b07122209809144c8ca2/example/id=2"
      )
      .then(res => {
        this.$store.commit("innerhome", res.data.data.register);
        this.cuns_list = res.data.data.register;
        this.cun_list.push(
          res.data.data.register[0],
          res.data.data.register[1],
          res.data.data.register[2]
        );
        // console.log(this.cun_list);
      });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="less" scoped>
.vbe3_1 {
  width: 100%;
  height: 20rem;
  background-color: #fff;
  margin-bottom: 1.5rem;
  .heatop {
    width: 100%;
    height: 2rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    p {
      font-size: 1.2rem;
      color: black;
      display: inline-block;
      margin-left: 1rem;
    }
    span{
      font-size: 0.8rem;
      background-color: rgb(50, 77, 165);
      color: #fff;
      border-radius: 0.5rem;
      display: inline-block;
      width: 2rem;
      height: 1rem;
      text-align: center;
      line-height: 1rem;
    }
  }
  .video-js {
    left: 1rem;
    top: 0.5rem;
  }
  .heabot {
    width: 100%;
    height: 4.5rem;
    margin-top: 1.2rem;
    .namel {
      margin: 0rem 0rem 0 1rem;
      display: inline-block;
      .headl {
        width: auto;
        height: 1rem;
        position: relative;
        .headimg {
          width: 1.7rem;
          height: 1.7rem;
          display: inline-block;
        }
        .namez {
          display: inline-block;
          color: black;
          position: absolute;
          top: 0.1rem;
          left: 2rem;
          font-size: 0.8rem;
          font-weight: 600;
        }
      }
      p {
        display: inline-block;
      }
      .namet {
        font-size: 0.9rem;
        color: black;
      }
      .nameb {
        color: #fff;
        background-color: red;
        font-size: 0.6rem;
        padding: 0 0.5rem 0 0.5rem;
        border-radius: 0.2rem;
      }
    }
    .namo {
      float: right;
      font-size: 0.5rem;
      width: 2rem;
      height: 1.4rem;
      line-height: 1.4rem;
      background-color: #fff;
      color: blue;
      border-radius: 0.2rem;
      border: 0.05rem solid blue;
      text-align: center;
      margin: 0.7rem 1rem 0 0;
    }
  }
}

.vbe2_1 {
  background-color: #fff;
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 1rem;
  margin-top: 1rem;
  .xialun {
    width: 100%;
    height: auto;

    .danlu {
      width: 100%;
      height: 4.6rem;
      position: relative;
      .imgs {
        width: 3rem;
        height: 3rem;
        display: inline-block;
        margin-top: 1rem;
        margin-left: 1rem;
      }
      .itma {
        position: absolute;
        width: 15rem;
        height: 3rem;
        background-color: #fff;
        left: 4.3rem;
        top: 1.2rem;
        p {
          display: block;
        }
        .nama {
          color: black;
          font-size: 1rem;
        }
        .name {
          width: 10rem;
          font-size: 0.7rem;
          height: 1.3rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 0.2rem;
        }
      }
      .namo {
        float: right;
        font-size: 0.5rem;
        width: 2rem;
        height: 1.4rem;
        line-height: 1.4rem;
        background-color: #fff;
        color: blue;
        border-radius: 0.2rem;
        border: 0.05rem solid blue;
        text-align: center;
        margin: 2rem 1rem 0 0;
      }
    }
  }
  .heatop {
    width: 100%;
    height: 2rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    p {
      font-size: 1.2rem;
      color: black;
      display: inline-block;
      margin-left: 1rem;
    }
    span {
      float: right;
      margin-right: 1rem;
    }
  }
}
.vbe1_1 {
  background-color: #fff;
  width: 100%;
  height: 10.3rem;
  overflow: hidden;
  margin-top: 1rem;
  .chang::-webkit-scrollbar {
    display: none;
  }
  .chang {
    display: flex;
    width: 100%;
    margin-top: 0.8rem;
    overflow-x: auto;
    .xuan_s {
      flex: 1;
      margin-left: 1rem;
      div {
        width: 100%;
        height: 100%;
        .imgs {
          width: 3rem;
          height: 3rem;
        }
        .name {
          width: 3.5rem;
          font-size: 0.7rem;
          height: 1.3rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .namo {
          display: inline-block;
          font-size: 0.5rem;
          width: 2rem;
          height: 1.4rem;
          line-height: 1.4rem;
          background-color: #fff;
          color: blue;
          border-radius: 0.2rem;
          border: 0.05rem solid blue;
        }
      }
      .imgs {
        width: 3rem;
        height: 3rem;
      }
      .name {
        width: 3.5rem;
        font-size: 0.7rem;
        height: 1.3rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .namo {
        display: inline-block;
        font-size: 0.5rem;
        width: 2rem;
        height: 1.4rem;
        line-height: 1.4rem;
        background-color: #fff;
        color: blue;
        border-radius: 0.2rem;
        border: 0.05rem solid blue;
      }
    }
  }
  .heatop {
    width: 100%;
    height: 2rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    p {
      font-size: 1.2rem;
      color: black;
      display: inline-block;
      margin-left: 1rem;
    }
    span {
      float: right;
      margin-right: 1rem;
    }
  }
}
.luns {
  width: 100%;
  height: 7rem;
  background-color: rgb(255, 255, 255);
  div {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 7rem;
    }
  }
}
.box {
  width: 100%;
  height: 3rem;
  background-color: #fff;
  .yings {
    float: left;
    width: calc(500% / 6);
    height: 3.5rem;
    display: flex;
    div {
      flex: 1;
      img {
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.3rem;
      }
      p {
        font-size: 0.7rem;
        display: block;
        margin-top: -0.3rem;
      }
    }
    div:nth-child(1) img {
      background-color: blue;
    }
  }
  .yingr {
    width: calc(100% / 6);
    height: 3rem;
    float: left;
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin-top: 0.3rem;
    }
    p {
      font-size: 0.7rem;
      display: block;
      margin-top: -0.3rem;
    }
  }
}
.hello {
  height: auto;
  margin-bottom: 1rem;
  .maxbox {
    padding-bottom: 2rem;
  }
}
</style>

